<template>
  <div class="app-container-10 container-f0f2f5 app-main system-user-container">
    <div class="container-fff app-container-15 app-ele-border-radius-0">
      <!-- 用户管理盒子-->
      <div class="system-user-box">
        <!--部门管理-->
        <div class="system-user-sector">
          <div class="sector-title">部门机构</div>
          <div class="sector-box">
            <el-tree v-loading="sectorDataLoading" :expand-on-click-node="false" default-expand-all :data="sectorData"
                     :props="{children: 'children',label: 'name' }" @node-click="handleSectorNodeClick"></el-tree>
          </div>
        </div>
        <div class="system-user-content">
          <div class="sys-content-search">
            <el-form ref="searchFrom" :inline="true" size="small" :model="userDataSearch">
              <el-form-item label="用户名称" prop="userName">
                <el-input v-model="userDataSearch.userName" clearable></el-input>
              </el-form-item>
              <el-form-item label="手机号码" prop="mobile">
                <el-input v-model="userDataSearch.mobile" clearable></el-input>
              </el-form-item>
              <el-form-item label="用户状态" prop="status">
                <el-select v-model="userDataSearch.status" placeholder="所有">
                  <el-option label="所有" value=""></el-option>
                  <el-option label="正常" :value="1"></el-option>
                  <el-option label="停用" :value="0"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="userDataFilter" icon="el-icon-search">搜索</el-button>
                <el-button @click="$refs.searchFrom.resetFields()" icon="el-icon-refresh">重置</el-button>
              </el-form-item>
            </el-form>
          </div>
          <!--用户列表-->
          <div class="sys-content-users">
            <!--操作-->
            <div class="sys-btn-box">
              <el-button size="small" type="primary" icon="el-icon-plus" @click="addNewUser">新增</el-button>
              <!-- 多选后删除-->
              <el-button size="small" type="danger" icon="el-icon-delete" :disabled="!delUserList.length"
                         @click="isCan">删除
              </el-button>
            </div>
            <evue-table :data="userData" :option="userOption" @selectionChange="selectionChange"
                        @handleEdit="handleEdit" @handleDelete="handleDelete">
              <template v-slot:userStatus="props">
                <el-switch
                        v-model="props.data.status"
                        :active-value="1"
                        :inactive-value="0"
                >
                </el-switch>
              </template>
              <template v-slot:menu="props">
                <el-button size="mini" type="text" @click="handleResetPassword(props.data)">重置</el-button>
              </template>
            </evue-table>
          </div>
        </div>
      </div>
    </div>
    <!--重置密码-->
    <el-dialog
            custom-class="up-dialog"
            :close-on-click-modal="false"
            top="5vh"
            title="重置密码"
            :visible.sync="dialogResetUserPassword"
            width="500px"
    >
      <div class="dialog-content">
        <el-form ref="resetForm" size="small" :model="currentEditUser">
          <el-form-item label="登录名称" prop="loginName" :rules="[{ required: true, message: '请输入登录名称'}]">
            <el-input class="input-box" v-model="currentEditUser.loginName" clearable></el-input>
          </el-form-item>
          <el-form-item label="输入密码" prop="password" :rules="[{ required: true, message: '请输入密码'}]">
            <el-input class="input-box" v-model="currentEditUser.password" clearable></el-input>
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer" style="text-align: right">
        <el-button size="small" type="primary" @click="resetPasswordFun">确定</el-button>
        <el-button size="small" @click="dialogResetUserPassword=false">取消</el-button>
      </div>
    </el-dialog>
    <!--新增用户-->
    <el-dialog
            custom-class="up-dialog"
            :close-on-click-modal="false"
            top="5vh"
            :title="addUserFormData.id ? '编辑用户':'新增用户'"
            :visible.sync="dialogAddUser"
            width="800px"
    >
      <div class="dialog-content add-user-pop app-ele-border-radius-0">
        <evue-form ref="eVueForm" @submit="handleAddNewUser" v-model="addUserFormData" :option="addUserOption">
          <template v-slot:sectorSlot>
            <el-cascader
                    :options="sectorData"
                    :props="{ checkStrictly: true,value:'id',label:'name' }"
                    clearable>
            </el-cascader>
          </template>
        </evue-form>
      </div>
      <div slot="footer" style="text-align: left">
        <el-button size="small" type="primary" @click="$refs.eVueForm.submit()">确定</el-button>
        <el-button size="small" @click="handleDialogAddUserClose">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import User from './user'

  export default User
</script>
